<!--
 * @Author: wjk
 * @Date: 2019-11-26 14:15:40
 * @LastEditors  : wjk
 * @LastEditTime : 2019-12-27 16:30:53
 * @description: 收货地址列表
 -->
<template>
  <base-page-view class-name="page-container address-container">
    <view v-if="showAreaTips" class="noDelivery" :class="{'nowrap': isShowTipBtn}">
      <image src="/static/images/icon/msg.png" alt="" class="deli-ti-icon" />
      <text ref="txtWrapper" class="deli-tip">{{ goodsTempObj && goodsTempObj.data && goodsTempObj.data.unsupported_area }}</text>
      <text v-if="isShowTipBtn" class="deli-btn" @click="viewTip">查看详情</text>
    </view>
    <!-- <view class="shadow">
      <b-button class-name="addButton" text="添加地址" :styles="{color: '#000', borderRadius: '20rpx', height: '80rpx', backgroundColor: 'white'}" @click="toManage(false)">
        <template slot="before">
          <image class="addIcon" src="/static/images/mine/ic_mine_add.png"></image>
        </template>
      </b-button>
    </view> -->
    <view v-if="isEmpty" class="address-no-view">
      <b-image src="/static/images/msg/address.png" class="address-no-pic" />
      <view class="address-no-set">{{ searched ? '没有找到用户地址':'暂无收货地址' }}</view>
      <view class="empty-address-btn" @click="toManage(false)">
        添加
      </view>
      <!-- <view class="address-no-tit">{{ searched ? '搜搜其他的吧':'没有收货地址寄不了快递哦' }}~</view> -->
    </view>
    <!-- 90 -->
    <base-list-view :load-after-init="true" :enable-pull-refresh="false" :top="showAreaTips?74:0" @onLoadMore="onLoadMore">
      <view v-if="!isEmpty || searched" class="search_view">
        <search-bar :keyword="listQuery.keyword" :placeholder="placeholderText" :border-radius="'6rpx'" @change="keyChange" @clear="keyClear" @search="search"></search-bar>
      </view>
      <uni-swipe-action v-if="!isEmpty" class="address-list">
        <view v-for="(item, index) in addressList" :key="index" class="address-item">
          <uni-swipe-action-item>
            <view class="action-item" @click="toManage(item)">
              <view class="line-name">
                <text>{{ item.name }}</text>
                <text class="mobile">{{ item.mobile }}</text>
              </view>
              <view class="line-address">
                <text>{{ item.province }}</text><text>{{ item.city }}</text><text>{{ item.area }}</text>{{ item.detail }}
              </view>
            </view>
            <template v-slot:right>
              <view class="btn-delete" @click="toDelete(item)"><text>删除</text></view>
            </template>
          </uni-swipe-action-item>
          <view class="line-footer">
            <view v-if="item.is_default" class="btn btn-active">
              <image src="/static/images/icon/icon_radio_active.png" mode="aspectFit" />
              <view>已设为默认</view>
            </view>
            <view v-else class="btn" @click.stop="setDefault(item)">
              <image src="/static/images/icon/icon_radio.png" mode="aspectFit" />
              <view>设为默认</view>
            </view>
            <view class="btn" @click.stop="toEdit(item)">
              <image src="/static/images/icon/icon_edit.png" mode="aspectFit" />
              <view>编辑</view>
            </view>
          </view>
        </view>
      </uni-swipe-action>
    </base-list-view>

    <view v-if="!isEmpty" class="add-address-btn" @click="toManage(false)">
      新增地址
    </view>
    <view v-if="showMention" class="mask" @click="showMention = false">
      <view class="maskSearch">
        <search-bar :placeholder="placeholderText" :border-radius="'6rpx'"></search-bar>
      </view>
      <img class="mention" src="./images/address_search_mention.png" />
    </view>
  </base-page-view>
</template>

<script>
import './index.scss'
import searchBar from '@/components/searchBar/index'
import BaseListView from '@/components/base/base-listview'
import { mapGetters } from 'vuex'
export default {
  components: {
    searchBar,
    BaseListView
  },
  data() {
    return {
      isEmpty: false,
      type: '',
      addressList: [],
      listQuery: {
        pageSize: 10,
        pageNo: 1,
        keyword: ''
      },
      nomore: false,
      placeholderText: '输入姓名或者手机号',
      searched: false,
      mescroll: null,
      isShowTipBtn: true,
      showMention: false
    }
  },
  computed: {
    ...mapGetters([
      'goodsTempObj'
    ]),
    showAreaTips() {
      if (this.goodsTempObj && this.type === 'select') {
        if (this.goodsTempObj.data.unsupported_area) {
          return true
        }
      }
      return false
    }
  },
  onLoad(option) {
    console.log('option', option)
    this.type = option.type
  },
  methods: {
    // 检查是否第一次进入地址列表
    checkFirstTime() {
      const isFirst = uni.getStorageSync('_address_search_mention_')
      console.log(isFirst)
      if (isFirst) {
        this.showMention = false
      } else {
        if (this.addressList.length > 0) {
          uni.setStorageSync('_address_search_mention_', true)
          this.showMention = true
        }
      }
    },
    resetUp() {
      this.nomore = false
      this.mescroll.resetUpScroll(true)
    },
    async getAddressList() {
      const res = await this.$api.mineApi.getShippingAddressList(this.listQuery)
      return res
    },
    toManage(addressData) {
      if (!addressData) {
        this.$navigateTo(`/pagesMine/address/address-manage?type=add`)
        return
      }
      if (this.type === 'select') {
        this.$prePage().addressData = addressData
        setTimeout(() => {
          uni.navigateBack()
        }, 50)
        return
      }
      // this.$navigateTo(`/pagesMine/address/address-manage?type=edit&addressData=${encodeURIComponent(JSON.stringify(addressData))}`)
    },
    toDelete(addressData) {
      this.$gc.$message({
        title: '温馨提示',
        showMessage: true,
        align: 'center',
        content: '是否要删除该收货地址？',
        confirm: async() => {
          const res = await this.$api.mineApi.deleteShippingAddress(addressData)
          if (res.success) {
            uni.showToast({
              title: `地址删除成功`,
              icon: 'none',
              duration: 1500
            })
            this.resetUp()
          }
        }
      })
    },
    async setDefault(addressData) {
      const res = await this.$api.mineApi.setShippingAddress({
        ...addressData,
        is_default: 1
      })
      if (res.success) {
        uni.showToast({ title: '设置成功', icon: 'none' })
        this.resetUp()
      }
    },
    toEdit(addressData) {
      this.$navigateTo(`/pagesMine/address/address-manage?type=edit&addressData=${encodeURIComponent(JSON.stringify(addressData))}`)
    },
    keyClear() {
      this.listQuery.keyword = ''
      this.search()
    },
    keyChange(value) {
      this.listQuery.keyword = value
    },
    async search() {
      this.searched = true
      // this.addressList = []
      // this.listQuery.pageNo = 1
      this.nomore = false
      this.mescroll.resetUpScroll(true)
    },
    // 上拉加载
    async onLoadMore(mescroll) {
      if (!this.mescroll) this.mescroll = mescroll
      if (this.nomore) {
        mescroll.endSuccess(0)
        return
      }
      this.listQuery.pageNo = mescroll.num
      const res = await this.getAddressList()
      if (res.success) {
        if (this.listQuery.pageNo === 1) {
          this.addressList = []
        }
        if (res.data.length === 0 && this.listQuery.pageNo === 1) {
          this.isEmpty = true
        } else {
          this.isEmpty = false
        }
        this.addressList = this.addressList.concat(res.data)
        this.checkFirstTime()
        if (res.data.length < this.listQuery.pageSize) {
          this.nomore = true
        }
        mescroll.endSuccess(this.listQuery.pageSize)
      } else {
        this.addressList = []
        this.isEmpty = true
        mescroll.endErr()
      }
    },
    // 点击查看提示详情
    viewTip() {
      this.$gc.$message({
        title: '温馨提示',
        content: this.goodsTempObj.data.unsupported_area,
        align: 'center',
        confirmText: '知道了',
        confirmColor: '#fff',
        // confirmBackground: 'rgb(255, 117, 159)',
        showCancel: false,
        showMessage: true,
        autoClose: false
      })
    },
    // 计算温馨提示是否过程
    showTipBtn() {
      // 文本宽的长度
      // const wrapperW = this.$refs.txtWrapper.offsetWidth
      // const ctx = document.createElement('canvas').getContext('2d')
      // ctx.font = '13px sans-serif'
      // const txW = ctx.measureText(this.goodsTempObj.data.unsupported_area).width
      // if (wrapperW > txW) {
      //   this.isShowTipBtn = false
      //   console.log(false)
      // } else {
      //   this.isShowTipBtn = true
      //   console.log(true)
      // }
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
